<template>
  <div class="container-content">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label="单据级别" prop="level">
        <el-radio v-model="formData.level" :label="1" border>目录</el-radio>
        <el-radio v-model="formData.level" :label="2" border>单据</el-radio>
      </el-form-item>

      <el-form-item label="单据" prop="parentId">
        <el-input
          :disabled="formData.level == 1 || !formData.level"
          v-model="formData.parentName"
          placeholder="请选择单据"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        >
          <i
            class="el-icon-document el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="编码" prop="fdocCode">
        <el-input
          v-model="formData.fdocCode"
          placeholder="请输入编码"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item> -->
      <el-form-item label="名称" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入名称"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入描述"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 弹窗 -->
    <el-dialog
      title="单据列表"
      :visible.sync="dialogTableVisible"
      append-to-body
      width="50%"
    >
      <el-table
        :data="gridData"
        style="width: 100%"
        @selection-change="selectChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column property="docCode" label="编码"></el-table-column>
        <el-table-column property="title" label="名称"></el-table-column>
        <!-- <el-table-column
                    property="address"
                    label="描述"
                ></el-table-column>
                <el-table-column
                    property="address"
                    label="子系统"
                ></el-table-column> -->
      </el-table>
      <el-pagination
        class="pagination mt20"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { add, getDocumentPopData } from "@/api/base/data";
import { updataKingDocTypeList, editKingDocTypeList } from "@/api/bim/outher";
export default {
  components: {},
  props: ["id"],
  data() {
    return {
      flag: false,
      dialogTableVisible: false,
      total: 0,
      gridData: [],
      selectItem: {},
      formData: {
        parentId: "",
        fdocCode: undefined,
        title: undefined,
        remark: undefined,
        level: undefined,
      },
      rules: {
        level: [
          {
            required: true,
            message: "请选择单据级别",
            trigger: "blur",
          },
        ],
        parentId: [
          {
            required: false,
            message: "请输入单据",
            trigger: "blur",
          },
        ],
        fdocCode: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.id != "") {
      updataKingDocTypeList(this.id).then((res) => {
        this.formData = res.data;
        this.flag = true;
      });
    }
  },
  methods: {
    // 选中单行
    selectChange(val) {
      if (val.length === 1) {
        console.log(val);
        
        this.formData.parentCode = val[0].docCode;
        this.formData.parentName = val[0].title;
        this.dialogTableVisible = false;
      }
      return;
    },
    // 单据弹窗
    handleIconClick() {
      if (this.formData.level == 1 || !this.formData.level) {
        return;
      }
      this.dialogTableVisible = true;
      let level = 1;
      getDocumentPopData(level).then((res) => {
        if (res.code === 200) {
          this.gridData = res.rows;
          this.total = res.total;
        }
      });
    },
    submitForm(cb) {
      if (this.flag) {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          editKingDocTypeList(this.formData, "KingDocType").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("修改成功");
              this.flag = false;
            }
          });
        });
      } else {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          add(this.formData, "KingDocType").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("新增成功");
            }
          });
        });
      }
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
